<template>
  <div>
    <van-tabs v-model:active="active" @click="handleTabClick" style="padding-top: 5px;">
      <van-tab title="丢卡"></van-tab>
      <van-tab title="捡卡"></van-tab>
    </van-tabs>
    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        :once="true"
    >
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import publicAxios from "@/plugins/publicAxios.ts";

const active = ref(0);
const list = ref<string[]>([]);
const loading = ref(false);
const finished = ref(false);

const handleTabClick = async () => {
  loading.value = true;
  try {
    if (active.value === 0) {
      // 丢卡
      const response = await publicAxios.get('/lose')
      list.value = response.data; // 假设 API 返回的数据为数组
    } else if (active.value === 1) {
      // 捡卡
      const response = await publicAxios.get('/find')
      list.value = response.data; // 假设 API 返回的数据为数组
    }
  } catch (error) {
    console.error('Error fetching card data:', error);
  } finally {
    finished.value = true;
  }
};
onMounted(() => {
  handleTabClick();
});
</script>
